<template>
	<view id="content-vip">
		<view class="content-list">
			<view class="vip-ul">
				<view class="vip-li" v-for="item in vipArr" :key="item.rankId" @click="toDetail(item.rankId)">
					<image src="/static/icon/bg_yueka_vip_01.png" v-show="item.rankId==2" class="vip-bg" mode=""></image>
					<image src="/static/icon/bg_yueka_vip_02.png" v-show="item.rankId==3"  class="vip-bg" mode=""></image>
					<view class="vip-row">
						<view class="left">
							<view class="name">{{item.rankName}}</view>
							<view class="name">¥{{item.price}}</view>
						</view>
						<image src="/static/icon/right_arrow11_white.png" class="arrow-r" mode=""></image>
					</view>
				</view>
				<!-- <view class="vip-li" @click="toDetail(2)">
					<image src="/static/icon/bg_yueka_vip_02.png" class="vip-bg" mode=""></image>
					<view class="vip-row">
						<view class="left">
							<view class="name">铂金</view>
							<view class="name">¥9999</view>
						</view>
						<image src="/static/icon/right_arrow11_white.png" class="arrow-r" mode=""></image>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			vipArr: [],
		};
	},
	onLoad() {
		
	},
	onNavigationBarButtonTap(e) {
		console.log(e)
		if (e.float == 'right') {
			uni.navigateTo({
				url: `/pages/user/vip/record`
			})
		}
	},
	components: {

	},
	onShow() {
		this.getList()
	},
	methods: {
		// 获取列表
		getList(){
			this.$Request.request('/api/user_rank/index','get', {}).then((res)=>{
				console.log(res)
				if(res.status == 1){
					this.vipArr = res.data;
					uni.setStorageSync('vipArr',JSON.stringify(this.vipArr))
				}else {
					this.$api.msg(res.msg)
				}
			})
			
		},
		// 去购买
		toDetail(cid){
			uni.navigateTo({
				url: `/pages/user/vip/index?cid=${cid}`
			})
		}
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-list {
		padding: 34rpx 32rpx 0px;
		box-sizing: border-box;
	}
	.vip-ul {
		.vip-li {
			width: 100%;
			height: 172rpx;
			position: relative;
			margin-bottom: 38rpx;
			.vip-bg {
				width: 100%;
				height: 172rpx;
			}
			.vip-row {
				width: 100%;
				height: 172rpx;
				position: absolute;
				left: 0px;
				top: 0px;
				padding: 0px 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					.name {
						font-size: 36rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 50rpx;
						margin-bottom: 12rpx;
					}
				}
				.arrow-r {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>
